<template>
  <div>
    <el-form  style="overflow:auto" :inline="true" @submit.native.prevent>
      <el-form-item>
        <el-input v-model="typeInfo.flowName" @change="search()" placeholder="请输入流程名称" style="width: 20em;margin-right: 15px"
          clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="default" @click="search()" :disabled='searchDisabled'>搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :infinite-scroll-disabled='disabled' v-infinite-scroll="load" stripe border :data="examineList" infinite-scroll-delay='1000' style="width: 100%" row-key="menuId">
      <el-table-column align="center" label="序号" type="index" width="100" center></el-table-column>
      <el-table-column label="项目名称"  prop="title"></el-table-column>
      <el-table-column label="流程名称"  prop="flowName"></el-table-column>
      <el-table-column  label="备注"  prop="describe"></el-table-column>
      <el-table-column align="center" label="状态" >
        <template slot-scope='scope'>
          <span>{{scope.row.status?'项目已发布':'项目未发布'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" >
        <template slot-scope="scope" v-if="!scope.row.status">
          <el-button type="text" @click="$router.push('/home/flow?id='+scope.row.pid)">修改流程</el-button>
        </template>
        <template slot-scope="scope">
          <el-button type="text" @click="openFlowDialog(scope.row.pid)">查看流程</el-button>
        </template>
      </el-table-column>
      <template slot="empty">
        {{loading?'加载中':'暂无数据'}}
      </template>
    </el-table>
    <flow-details @close='flowDialog=false' v-if="flowDialog" :isMyProject='false' :flowDialog='flowDialog' :flowDetailInfo='flowDetailInfo'></flow-details>
  </div>
</template>

<script>
  import flowDetails from "@/components/flowDetails.vue"
  export default{
    name:"examine",
    data(){
      return {
        examineList:[],
        typeInfo:{
          flowName:'',
          status:'',
          page:1,
          limit:10
        },
        disabled:false,
        loading:true,
        flowDialog:false,
        flowDetailInfo:null,
        searchDisabled:false
      }
    },
    components:{flowDetails},
    methods:{
      async initExamineList(){
        this.loading=true
        let result=await this.$get('/api/flow/list',this.typeInfo)
        this.loading=false
        if(!result.code==200) return this.$message.error(result.msg)
        this.examineList.push(...result.data.list)
        this.disabled=this.examineList.length==result.data.total
        this.searchDisabled=false
      },
      load(){
        this.typeInfo.page++
        this.initExamineList()
      },
      resetInfo(){
        this.examineList=[]
        this.searchDisabled=true
        this.typeInfo.page=1
      },
      search(){
        this.resetInfo()
        this.initExamineList()
      },
      // 切换项目状态回调
      statusChange(val){
        this.resetInfo()
        this.typeInfo.status=val
        this.initExamineList()
      },
      async openFlowDialog(id){
        let str=this.isMyProject?'/api/project/flow/':'/api/findFlow/'
        let result=await this.$get(str+id)
        if(result.code==200){
          this.flowDetailInfo=result.data
          this.flowDialog=true
        }
      },
    },
    mounted(){
      this.initExamineList()
    }
  }
</script>

<style>
</style>
